<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline-block;
            margin-right: 10px;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
        }

    
        

        /* 手机图片弹出框样式 */
        .phone .popup {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            padding: 20px;
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

    
    </style>
</head>

<body>


    <header>
        <nav>
            <ul>
                <li class="phone"><a href="#">小米手机</a></li>
                <li class="tv"><a href="#">电视</a></li>
                <li class="notebook"><a href="#">笔记本</a></li>
                <li class="ip"><a href="#">平板</a></li>
                <li class="electroic"><a href="#">家电</a></li>
                <li cal=" luyouqi"><a href="#">路由器</a></li>
            </ul>
        </nav>
    </header>

    <div id="device-container">
        <img id="mix-4" src="Redmi手机.png" alt="小米MIX 4" style="display: none;">
        <img id="laptop" src="laptop.jpg" alt="小米笔记本Pro" style="display: none;">
    </div>

    <script>
        var phones = document.getElementsByClassName('phone');
        for (var i = 0; i < phones.length; i++) {
            phones[i].addEventListener('click', function () {
                document.getElementById('mix-4').style.display = 'block';
                document.getElementById('laptop').style.display = 'none';
            });
        }
        var tvs = document.getElementsByClassName('tv');
        for (var i = 0; i < tvs.length; i++) {
            tvs[i].addEventListener('click', function () {
                document.getElementById('mix-4').style.display = 'none';
                document.getElementById('laptop').style.display = 'block';
            });
        }


        // 当鼠标移开按钮时，隐藏相应的图片


        document.getElementById('mix-4').addEventListener('mouseover', function () {
            document.getElementById('mix-4').style.display = 'none';
        });

        document.getElementById('laptop').addEventListener('mouseover', function () {
            document.getElementById('laptop').style.display = 'none';
        });

    </script>

</body>

</html>